<%--
  Created by IntelliJ IDEA.
  User: CM
  Date: 17/5/21
  Time: 下午7:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>平台首页管理</title>

    <link href="${ctx}/resources/pagination/style/pagination.css" rel="stylesheet" type="text/css">
    <link href="${ctx}/resources/pagination/style/common.css" rel="stylesheet" type="text/css">
    <jsp:include page="../../common/header.jsp"></jsp:include>
    <jsp:include page="../../common/cloud-head.jsp"></jsp:include>
    <jsp:include page="../../common/dt.jsp"></jsp:include>
    <script type="text/javascript" src="${ctx}/resources/pagination/script/jquery.pagination.js"></script>
    <style>
        #areaSelectBox > div {
            display: inline-block;
            width: 166px;
        }

        #dateRange {
            display: inline-block;
            width: 15rem;
        }

        #linkInputBox {
            display: block;
        }

        .card-content {
            min-height: 83px;
        }

        #articleSelectBox, #goodSelectBox {
            display: none;
        }

        .article-item {
            display: inline-block;
            background: #f3f3f3;
            border: 1px solid #afa0a0;
            line-height: 2.5rem;
            padding: 0 0 0 1rem;
        }

        .article-item .item-title {
            font-weight: bold;
            color: #555;
        }

        .article-item i.fa {
            display: inline-block;
            line-height: 2.5rem;
            width: 2rem;
            text-align: center;
            color: #fff;
            background: #fb5e5e;
            height: 2.5rem;
            vertical-align: top;
        }

        span.good-item:hover, span.shop-item:hover, span.article-item:hover {
            border-color: #af8080;
            box-shadow: 0 0 3px #f00;
        }

        #newBox, #hotBox, #infoBox, #shopBox {
            overflow-y: auto;
        }

        .article-item {
            padding: 0;
        }

        .article-item .item-thumb {
            display: block;
            width: 100%;
        }

        .article-item .item-thumb img {
            display: block;
            width: 100%;
        }

        .article-item .item-title {
            width: 20rem;
            padding: 0;
            background: #fff;
            border: none;
            display: block;
            text-align: center;
        }

        .article-item i.fa {
            display: block;
            padding: 0;
            margin: 0;
            width: 100%;
            opacity: 0.8;
        }

        .article-item i.fa::after {
            content: '点击删除';
            display: inline-block;
            margin-left: .4rem;

        }

        .article-item {
            border: 1px solid #ddd;
            box-shadow: -1px 0 3px #888;
            cursor: pointer;
            transition: all ease .8s;
        }

        .article-item:hover {
            box-shadow: -1px 0 3px #f33;
            border-color: #f00;
        }

        .article-item i.fa:hover {
            background: #f33;
            color: #fff;

            transition: all ease .8s;
        }

        .article-item .item-title {
            padding: 0 0.8rem;
            color: #555;
        }

        .article-item i.fa {
            background: #f7f7f7;
            color: #666;
        }

        .article-item .item-thumb {
            display: block;
            width: 12rem;
            height: 4rem;
            overflow: hidden;
        }

        span.item-title {
            height: 2.5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .article-item {
            position: relative;
            height: 9rem;
        }

        .article-item i.fa {
            position: absolute;
            bottom: 0;
            left: 0;
        }

        #shopbox img,#goodbox img{
            width: 12rem;
            height: 4rem;
        }

        .good-item {
            display: inline-block;
            vertical-align: top;
            width: 18rem;
            height: 24rem;
            overflow: hidden;
            box-shadow: 1px 1px 3px #ccc;
            padding: 0.4rem 0.4rem;
        }

        .good-item img {
            display: block;
            max-height: 20rem;
            overflow: hidden;
        }

        .good-item p {
            display: block;
            line-height: 1.6rem;
            height: 3.2rem;
            font-size: 12px;
            margin: 0.8rem auto !important;
            overflow: hidden;
        }

        .nav {
            height: auto !important;
            position: static;
            background: transparent;

        }
    </style>
</head>
<body>
<%--slider configuration--%>
<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-tabs nav-justified">
            <li role="presentation" class="active" data-value="PRODUCT"><a href="javascript:void(0);">厂商/代理商</a></li>
            <li role="presentation" data-value="SELLER"><a href="javascript:void(0);">供应商</a></li>
            <li role="presentation" data-value="OTHER"><a href="javascript:void(0);">辅助料配件供应商</a></li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-action">
                <label>轮播图配置</label>
                <button class="btn btn-primary" data-toggle="modal" onclick="$('#addDialog').modal('show')">添加轮播图
                </button>
            </div>
            <div class="card-content">
                <table id="mainTable" cellpadding="0" cellspacing="0" border="0" class="auto-table">
                    <thead>
                    <tr>
                        <th>图片</th>
                        <th>链接类型</th>
                        <th>响应动作</th>
                        <th>投放城市</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card" id="flagShopBox">
            <div class="card-action">
                <label>本周大牌</label>
                <button class="btn btn-primary" onclick="$('#shopSelectDialog').modal('show');">添加店铺</button>
                <div class="alert alert-warning" style="display: inline-block;padding:0.2rem 0.4rem;">
                    本模块仅配置的前三个店铺会展示在APP及公众号首页上。
                </div>
            </div>
            <div class="card-content" id="shopBox">

            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card" data-id="PRODUCT" style="height: auto;">
            <div class="card-action">
                <label>平台推荐</label>
                <button onclick="showGoodSelect()" class="btn btn-primary">添加商品</button>
            </div>
            <div class="card-content" style="height: auto;" id="goodbox">
            </div>
        </div>
    </div>
</div>


<jsp:include page="../home/pop-dialog.jsp"></jsp:include>
<jsp:include page="../home/template.jsp"></jsp:include>

<script src="${ctx}/resources/portal/script/app-portal-home.js" type="text/javascript"></script>
<jsp:include page="${ctx}/WEB-INF/view/admin/shop/content/common-tmpl.jsp"></jsp:include>


</body>
</html>
